<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../static/regiserstyle.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
    <title>注册</title>
</head>
<body>
    
    <form action="/register" class="login" method="post">
        <p>懒羊羊电商网站</p>
        <input type="text" placeholder="用户名" name="username">
        <input type="password" placeholder="密码" name="password" id="password-input" oninput="validatePassword()">
        <input type="password" placeholder="确认密码" name="confirm_password" id="confirm-password-input" oninput="validatePassword()">
        <span id="password-error" class="error-message"></span>
        <input type="submit" class="btn" value="注  册" id="register-button" disabled>
    </form>  
    <script>
        function encryptPassword() {
          const passwordInput = document.getElementsByName('password')[0];
          const encryptedPassword = CryptoJS.MD5(passwordInput.value).toString();
          passwordInput.value = encryptedPassword;
        }

        function validatePassword() {
          const passwordInput = document.getElementsByName("password")[0];
          const confirmInput = document.getElementsByName("confirm_password")[0];
          const passwordError = document.getElementById("password-error");
          const loginButton = document.getElementById("register-button");
          const passwordPattern = /^(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]{6,15}$/;

          if (!passwordPattern.test(passwordInput.value)) {
            passwordError.textContent = "密码必须包含字母和数字，长度必须在6~15位之间！";
            passwordError.style.display = "block";
            loginButton.disabled = true;
          } else if (passwordInput.value !== confirmInput.value) {
            passwordError.textContent = "两次密码不一致！";
            passwordError.style.display = "block";
            loginButton.disabled = true;
          } else {
            passwordError.style.display = "none";
            loginButton.disabled = false;
          }
        }

        const form = document.querySelector(".login");
        form.addEventListener("submit", function (event) {
          event.preventDefault();
          encryptPassword();
          const confirmInput = document.getElementsByName("confirm_password")[0];
          confirmInput.remove();  // 删除确认密码的 input 元素
          form.submit();
        });
    </script>
</body>
</html>


